<template>
    <div class='ranklist'  v-loading="loading" element-loading-text="拼命加载中..." element-loading-background="#fff">
        <el-card :style="{backgroundImage:'url('+ imgurl + ')'}">
            <div style="padding: 14px;">
                <time class="time">上次更新时间：{{ currentDate }}</time>
            </div>
        </el-card>
        <el-table :data="songList" :show-header= false @row-click="openDetails">
            <el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
            <el-table-column  label="">
                <template slot-scope="prope">
                    <span>{{prope.row.filename}}</span>
                </template>
            </el-table-column>
            <el-table-column width="60"> 
                <i class="el-icon-download"></i>  
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            imgurl : '',
            songList : [],
            loading : true
        };
    },
    beforeRouteEnter(to, from, next){
      next(vm=> {
        vm.getSongs();
        vm.$store.commit('showHead', true);
        vm.$store.commit('setHeadStyle', {'background': '#2CA2F9'});
      })
    },
    beforeRouteLeave(to, from, next){
        this.$store.commit('showHead', false);
        this.$store.commit('resetHeadStyle');
        next();
    },
    computed : {
        currentDate(){
            let time = new Date()
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            let date = time.getDate()
            if(month < 10) month = '0' + month
            if(date < 10) date = '0' + date
            return `${year}-${month}-${date}`
        }
    },
    methods: {
        getSongs(){
            let infoID = this.$route.params.id;
            this.songList = [];
            this.$http.get(`/proxy/rank/info/?rankid=${infoID}&page=1&json=true`).then(({data}) => {
                // console.log(data);
                this.loading = false;
                let {info, songs} = data;
                let {banner7url, rankname} = info;
                let {list} = songs;
                this.imgurl = banner7url.replace('{size}', '400');
                this.songList = list;
                this.$store.commit('setHeadTitle', rankname);
            }).catch((err) => {
                this.$message.error('网络波动，刷新下试试尼');
                this.loading = false;
                console.log(err);
            })
        },
        indexMethod(index){
            return (index + 1) + '.';
        },
        openDetails(row){

        }
    },
}
</script>
<style lang='scss' >
.ranklist .el-card{
    width: 100%;
    height: 200px;
    margin-top: -3px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    .el-card__body{
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        padding: 0;
        font-size: 18px;
        width: 100%;
        background: -webkit-linear-gradient(bottom,rgba(0,0,0,.6),rgba(0,0,0,0));
    }
}
.ranklist .el-icon-download{font-size: 26px}
.ranklist .el-table__body tr{
    .cell>div{
        border-radius: 10px;
    }
    &:first-child .cell>div{
        color: #fff;
        background-color: #E80000;
    }
    &:nth-child(2) .cell>div{
        color: #fff;
        background-color: #FF7200;
    }
    &:nth-child(3) .cell>div{
        color: #fff;
        background-color: #F8B300;
    }
}
.ranklist .el-table_1_column_1  {
    text-align: center;
}
</style>